<template>
  <div id="app">
    <router-view :key="$route.fullPath" />
    <a href="javascript:;">
      <div class="toTop">
        <p>回</p>
        <p>到</p>
        <p>顶</p>
        <p>部</p>
      </div>
    </a>
  </div>
</template>
<script>
export default {
  methods: {
    backTop() {
      var btn = document.querySelector(".toTop");
      var d = document.documentElement;
      var b = document.body;
      window.onscroll = set;
      btn.style.display = "none";
      btn.onclick = function () {
        btn.style.display = "none";
        window.onscroll = null;
        this.timer = setInterval(function () {
          d.scrollTop -= Math.ceil((d.scrollTop + b.scrollTop) * 0.1);
          b.scrollTop -= Math.ceil((d.scrollTop + b.scrollTop) * 0.1);
          if (d.scrollTop + b.scrollTop == 0)
            clearInterval(btn.timer, (window.onscroll = set));
        }, 10);
      };
      function set() {
        btn.style.display = d.scrollTop + b.scrollTop > 100 ? "block" : "none";
      }
    },
  },
  mounted() {
    this.backTop("goTop");
  },
};
</script>

<style>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
a {
  text-decoration: none;
  color: #000;
}
body {
  background: #e1e1e1;
}
.toTop {
  width: 24px;
  color: gray;
  padding: 12px 0 12px 5px;
  position: fixed;
  cursor: pointer;
  text-align: center;
  z-index: 20;
  background-color: #fff;
  border-radius: 12px 0 0 12px;
  top: 442px;
  right: 0px;
}
</style>
